<template>
  <section>
    <el-card :body-style="bodyStyle">
      <div
        slot="header"
        class="clearfix"
        @click="openOrClose"
        style="cursor: pointer"
      >
        <span :style="headerStyle">{{ headerText }}</span>
        <i :class="rightClass" style="float: right; padding: 3px 0"></i>
        <slot name="button"></slot>
        <slot name="title"></slot>
      </div>
      <slot></slot>
    </el-card>
  </section>
</template>

<script>
  export default {
    props: {
      headerText: String,
      isOpen: {
        type: Boolean,
        default: true
      },
      headerStyle: {
        type: String,
        default: "font-size:17px;font-weight: 600;"
      }
    },
    created() {
      if (!this.isOpen) {
        this.open = true;
        this.bodyStyle = "display:none";
        this.rightClass = 'el-collapse-item__arrow el-icon-arrow-right'
      } else {
        this.open = false;
        this.bodyStyle = "display:block";
        this.rightClass = 'el-collapse-item__arrow el-icon-arrow-right is-active'
      }

    },
    mounted() {
    },
    data() {
      return {
        open: false,
        bodyStyle: "",
        rightClass: "el-collapse-item__arrow el-icon-arrow-right"
      };
    },
    computed: {},
    methods: {
      openOrClose() {
        if (this.open) {
          this.rightClass =
            "el-collapse-item__arrow el-icon-arrow-right is-active";
          this.bodyStyle = "display:block";
        } else {
          this.rightClass = "el-collapse-item__arrow el-icon-arrow-right";
          this.bodyStyle = "display:none";
        }
        this.open = !this.open;
      }
    },
    components: {}
  };
</script>

<style scoped></style>
